// src/APP.vue

<template>
<div id="v-for-example">
  <div>数组形式</div>
  <div>
    1、item in items形式：
    <div v-for="item in items" :key="item.id">
      {{ item.message }}
    </div>
  </div>

  <br>

  <div>
    2、(item, index) in items形式
    <div>在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。</div>
    <div v-for="(item, index) in items" :key="item.id">
      {{ parentMessage }} - {{ index }} - {{ item.message }}
    </div>
  </div>

  <br>
  
  <div>
    3、item of items形式
    <div v-for="item of items" :key="item.id">
      {{item.message}} - {{item.id}}
    </div>
  </div>
</div>
</template>

<script lang="ts">
import {   defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const parentMessage = ref('Parent')
    const items = reactive([
      { message: 'Foo' , id:0}, { message: 'Bar',id:1 }
    ])
    return {
      parentMessage,
      items
    }
  }
})
</script>